<template>
	<view class="oa-content">

		<view class="tn-bg-white top-fixed">
			<tn-tabs :list="fixedList" :current="current" :isScroll="false" activeColor="#3D7EFF"
				inactiveColor="#C5CAD5" :bold="true" backgroundColor="#FFFFFF" :fontSize="32" :badgeOffset="[20, 50]"
				@change="tabChange"></tn-tabs>
		</view>

		<view class="tn-padding-bottom-xl" :style="{paddingTop:  40 +'px'}">
			<view class="" v-if="current==0">
				<view class="content-bg tn-margin tn-padding" v-for="(item, index) in noticeList" :key="index"
					@click="tn('')">
					<view
						class="tn-flex tn-flex-direction-row tn-flex-col-center tn-flex-row-between tn-padding-bottom">
						<view class="tn-flex">
							<view class="tn-flex user-pic">
								<view class="user-image"
									:style="'background-image:url('+ item.userImage +');width: 35rpx;height: 35rpx;background-size: cover;'">
								</view>
							</view>
							<view class="tn-flex tn-margin-left-xs" style="width: 300rpx;">
								<text class="clamp-text-1 tn-color-gray--dark">{{ item.userName }}</text>
							</view>
						</view>
						<view class="tn-color-gray">
							{{ item.date }}
						</view>
					</view>
					<view class="tn-flex tn-flex-row-between tn-flex-col-center">
						<view class="justify-content-item tn-text-justify clamp-text-1 tn-text-lg tn-text-bold">
							{{ item.title }}
						</view>
						<view class="justify-content-item tn-flex tn-flex-row-between tn-flex-col-center">
							<view class="justify-content-item tn-margin-left-sm">
								<tn-button size="sm" backgroundColor="#FB6A67" padding="0rpx 40rpx" width="100%"
									:fontSize="22" :plain="true" fontColor="#FB6A67" @click="tn('')">
									<text class="">驳 回</text>
								</tn-button>
							</view>
							<view class="justify-content-item tn-margin-left-sm">
								<tn-button size="sm" backgroundColor="#4B98FE" padding="0rpx 40rpx" width="100%"
									:fontSize="22" fontColor="#FFFFFF" @click="tn('')">
									<text class="">通 过</text>
								</tn-button>
							</view>
						</view>

					</view>

					<!-- <view class="tn-text-justify clamp-text-2 tn-padding-top-sm tn-color-gray--dark">
            {{ item.content }}
          </view> -->

				</view>
			</view>

			<view class="" v-if="current==1">
				<view class="content-bg tn-margin tn-padding" v-for="(item, index) in noticeList" :key="index"
					@click="tn('')">
					<view
						class="tn-flex tn-flex-direction-row tn-flex-col-center tn-flex-row-between tn-padding-bottom">
						<view class="tn-flex">
							<view class="tn-flex user-pic">
								<view class="user-image"
									:style="'background-image:url('+ item.userImage +');width: 35rpx;height: 35rpx;background-size: cover;'">
								</view>
							</view>
							<view class="tn-flex tn-margin-left-xs" style="width: 300rpx;">
								<text class="clamp-text-1 tn-color-gray--dark">{{ item.userName }}</text>
							</view>
						</view>
						<view class="tn-color-gray">
							{{ item.date }}
						</view>
					</view>
					<view class="tn-flex tn-flex-row-between tn-flex-col-center">
						<view class="justify-content-item tn-text-justify clamp-text-1 tn-text-lg tn-text-bold">
							{{ item.title }}
						</view>
						<view class="justify-content-item tn-flex tn-flex-row-between tn-flex-col-center">
							<!-- <view class="justify-content-item tn-margin-left-sm">
                <tn-button size="sm" backgroundColor="#FB6A67" padding="0rpx 40rpx" width="100%" :fontSize="22"
                  :plain="true" fontColor="#FB6A67" @click="tn('')">
                  <text class="">驳 回</text>
                </tn-button>
              </view>
              <view class="justify-content-item tn-margin-left-sm">
                <tn-button size="sm" backgroundColor="#4B98FE" padding="0rpx 40rpx" width="100%" :fontSize="22"
                   fontColor="#FFFFFF" @click="tn('')">
                  <text class="">通 过</text>
                </tn-button>
              </view> -->
							<view class="justify-content-item tn-margin-left-sm">
								<tn-button size="sm" backgroundColor="#4B98FE" padding="0rpx 40rpx" width="100%"
									:fontSize="22" :plain="true" fontColor="#4B98FE" @click="tn('')">
									<text class="">查看详情</text>
								</tn-button>
							</view>
						</view>

					</view>

					<!-- <view class="tn-text-justify clamp-text-2 tn-padding-top-sm tn-color-gray--dark">
            {{ item.content }}
          </view> -->

				</view>
			</view>

		</view>


	</view>
</template>

<script>
	import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
	export default {
		name: 'TemplatePending',
		mixins: [template_page_mixin],
		data() {
			return {
				current: 0,
				fixedList: [{
						name: '待处理'
					},
					{
						name: '已处理'
					}
				],
				noticeList: [{
					color: 'orangered',
					title: '转正申请',
					content: '各位同事：一年一度的春节又到啦，根据国家法定节假日规定，2024年春节放假安排如下：02月01日——02月22日',
					userImage: 'https://q1.itc.cn/q_70/images03/20240315/5e851fd8654c43eeacea8da4d0fbb56b.jpeg',
					userName: '张安-产品部',
					date: '2024-01-26 10:12',
				}, {
					color: 'blue',
					title: '转正申请',
					content: '各位同事：这里是一大堆瞎逼逼的描述，为了凑字数，想不出来什么文案了',
					userImage: 'https://q1.itc.cn/q_70/images03/20240315/5e851fd8654c43eeacea8da4d0fbb56b.jpeg',
					userName: '你的名字',
					date: '2024-01-20 14:02',
				}, {
					color: 'green',
					title: '转正申请',
					content: '各位同事：这里是一大堆瞎逼逼的描述，为了凑字数，想不出来什么文案了',
					userImage: 'https://q1.itc.cn/q_70/images03/20240315/5e851fd8654c43eeacea8da4d0fbb56b.jpeg',
					userName: '张安',
					date: '2024-01-12 09:56',
				}, {
					color: 'blue',
					title: '请假申请',
					content: '各位同事：这里是一大堆瞎逼逼的描述，为了凑字数，想不出来什么文案了',
					userImage: 'https://q1.itc.cn/q_70/images03/20240315/5e851fd8654c43eeacea8da4d0fbb56b.jpeg',
					userName: '张安',
					date: '2024-01-06 17:59',
				}, {
					color: 'green',
					title: '请假申请',
					content: '各位同事：这里是一大堆瞎逼逼的描述，为了凑字数，想不出来什么文案了',
					userImage: 'https://q1.itc.cn/q_70/images03/20240315/5e851fd8654c43eeacea8da4d0fbb56b.jpeg',
					userName: '张安',
					date: '2023-12-26 16:26',
				}, {
					color: 'green',
					title: '出差申请',
					content: '各位同事：这里是一大堆瞎逼逼的描述，为了凑字数，想不出来什么文案了',
					userImage: 'https://q1.itc.cn/q_70/images03/20240315/5e851fd8654c43eeacea8da4d0fbb56b.jpeg',
					userName: '张安',
					date: '2023-12-22 12:56',
				}],

			}
		},
		methods: {
			// tab选项卡切换
			tabChange(index) {
				this.current = index
			},
			// 跳转
			tn(e) {
				uni.navigateTo({
					url: e,
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	/* 胶囊*/
	.tn-custom-nav-bar__back {
		width: 60%;
		height: 100%;
		position: relative;
		display: flex;
		justify-content: space-evenly;
		align-items: center;
		box-sizing: border-box;
		background-color: rgba(0, 0, 0, 0.15);
		border-radius: 1000rpx;
		border: 1rpx solid rgba(255, 255, 255, 0.5);
		color: #FFFFFF;
		font-size: 18px;

		.icon {
			display: block;
			flex: 1;
			margin: auto;
			text-align: center;
		}
	}

	/* 新增OA色系，自行调用，或者拿色值去用，多种方式*/
	.oa-black {
		color: #1D2541;
	}

	.oa-blue {
		color: #4B98FE;
	}

	.oa-orangeyellow {
		color: #FFAC00;
	}

	.oa-green {
		color: #00D05E;
	}

	.oa-orange {
		color: #FE871B;
	}

	.oa-cyan {
		color: #00C8B0;
	}

	.oa-indigo {
		color: #00B9FE;
	}

	.oa-orangered {
		color: #FB6A67;
	}

	.oa-purple {
		color: #957BFE;
	}

	.oa-content {
		max-width: 640px;
		margin: 0 auto;
		background-color: #F8F7F8;
		min-height: 100vh;
		padding-bottom: 60rpx;
		padding-bottom: calc(80rpx + env(safe-area-inset-bottom) / 2);
		padding-bottom: calc(80rpx + constant(safe-area-inset-bottom));
	}

	.top-fixed {
		max-width: 640px;
		margin: 0 auto;
		position: fixed;
		background-color: rgba(255, 255, 255, 1);
		top: 0;
		width: 100%;
		transition: all 0.25s ease-out;
		z-index: 100;
	}

	/* 文字截取*/
	.clamp-text-1 {
		-webkit-line-clamp: 1;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		text-overflow: ellipsis;
		overflow: hidden;
	}

	.clamp-text-2 {
		-webkit-line-clamp: 2;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		text-overflow: ellipsis;
		overflow: hidden;
	}

	/* 背景阴影 start*/
	.content-bg {
		border-radius: 15rpx;
		background-color: #FFFFFF;
		// box-shadow: 0rpx 0rpx 50rpx 0rpx rgba(0, 0, 0, 0.07);
	}

	/* 用户头像 start */
	.user-image {
		width: 35rpx;
		height: 35rpx;
		position: relative;
		overflow: hidden;
		border-radius: 50%;
	}

	.user-pic {
		background-size: cover;
		background-repeat: no-repeat;
		// background-attachment:fixed;
		background-position: top;
		border: 1rpx solid rgba(255, 255, 255, 0.05);
		box-shadow: 0rpx 0rpx 80rpx 0rpx rgba(0, 0, 0, 0.15);
		border-radius: 50%;
		overflow: hidden;
		// background-color: #FFFFFF;
	}
</style>